body { margin: 0px; padding: 0px; font-family: Calibri; }

/* default common settings */
.x-hidden { display: none !important;}

/* form styles */
.formRow label, .formRow input, .formRow textarea { display: block;}	
.formRow label {padding: 2px 0px;}
.formRow { margin: 0px 0px 15px 40px;}	
.formRow span { color: red; font-size: 14px;}
.formRow input.txt { width: 400px; line-height: 25px;}
.formRow .button {float: left;margin-right: 10px;}
.formRow textarea { width: 400px; height: 200px;}
	
	
/* buttons >>> */
.button { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); display: inline-block; text-align: center; color: #fff; border: 1px solid #9c9c9c; /* Fallback style */ border: 1px solid rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(0,0,0,0.4); box-shadow: 0 0 .05em rgba(0,0,0,0.4); -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);}
a.button:hover, input.button:hover {	text-decoration: none; box-shadow: 0 0 .1em rgba(0,0,0,0.4); -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);}
a.button:active, input.button:active { position: relative; top: 1px; }
a.button {margin-top: 2px;}
span.button {cursor: default;}
/* black */
.black { background: #141414; background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#141414) ); background: -moz-linear-gradient(-90deg, #656565, #141414); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#656565', EndColorStr='#141414');}
.black:hover { background: #656565; background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#656565) ); background: -moz-linear-gradient(-90deg, #141414, #656565); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#141414', EndColorStr='#656565'); }
/* blue 2 */
.blue { background: #4477a1; background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) ); background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1); filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
a.blue:hover, input.blue:hover { background: #81a8cb; background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) ); background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb); filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
/*small*/
.small {padding: .3em 1em .3em;}
span.button {display: inline !important;}
/* buttons <<< */

.ico-pencil {width: 128px; height: 128px; margin-left: 100px; margin-top: 20px;}
.log-content .ico-pencil {width: 100px; height: 100px; margin-left: 15px;}

.top-menu { background:#6191c8; height: 30px; position: fixed; width: 100%; border-bottom: 1px solid gray; -moz-box-shadow: 0px 2px 3px #888; -webkit-box-shadow: 0px 2px 3px #888; box-shadow: 0px 2px 3px #888;}
.top-menu a { text-decoration: none; color: white; display: block; }
.top-menu .left-item { width: 50%; color: white; display: inline; float: left; }
.top-menu .left-item a { margin: 5px 20px; }
.top-menu .right-item { width: 50%; float: right; text-align: right; position: relative; }
.top-menu .right-item .center-block { position: absolute; left: -30px; top: 0px; background: #739fd1;}
.top-menu .right-item .center-block a { padding:6px 20px 0px; }
.top-menu .right-item .right-block { display: inline;}
.top-menu .right-item .right-block a {margin: 5px 20px;}

.main { background: #f6f6f6; padding-top: 30px;}

.left-menu { list-style: none;  margin-top: 80px; }
.left-menu li { margin-top: 10px; width: 230px; height: 60px; display: block; background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin-bottom: 4px; border-left: 10px solid #000;}
.left-menu a, .left-menu span { text-decoration: none; display: block; padding: 0px 30px; font-size: 17px; line-height: 60px; color: black;}	
.left-menu li.active, .left-menu li:hover{ border-color: #4477A1; }
.left-menu li.active span, .left-menu li.active a, .left-menu li a:hover { color: #4477A1; }
		
.right {text-align: right; min-height: 570px; margin-left: 300px; background: white;  border-left: solid 1px #bebebe; padding: 30px;}
.right .inner { text-align: left; margin-left: 70px;}
.right .inner h3 {padding-left: 40px;}
	
.left { text-align: left; width: 300px; float: left; height: 70px;}
.left .logo {margin-left: 20px; margin-top: 50px;}
	

/* sign in page */
.div-color { background: #F6F6F6; border-bottom: solid 1px #BEBEBE; height: 200px; }
.log-content { margin: 10px auto; width: 500px; position: relative; top: -140px; }
.log-content img { margin-bottom: 20px; position: relative; left:10px;}  
.log-content form { margin-top: 20px; }
.log-content .ico-pencil {width: 100px; height: 100px; margin-left: 15px;}

img.logo {	width: 250px; height: 80px;}

/*note item template*/
.note-item {padding: 20px 0px; width: 700px; text-align: justify;}
.note-item a.view-link {display: block; text-decoration: none; background:#fbfbfb; color: #000; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); padding: 15px; border: solid 1px #f6f6f6;}
.note-item a.view-link:hover {background: #F6F6F6;}
.note-item span {display: block;}
.note-item .icon { float: left; margin-right: 20px}
.note-item .title {text-transform: uppercase; margin: 0px; line-height: 32px; padding-left: 60px; font-size: 18px; font-weight: bold;}
.note-item .date {color: gray; font-size:12px; margin: 0px; padding-bottom: 20px;}
.note-item .view-link .description {margin-top: 0px;}
.note-item .description {margin-top: 60px;}

.footer { font-size:12px; background: #d8d8d8; padding:6px 20px; color: gray;}